<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Jetstrap - The Easiest Twitter Bootstrap Builder!</title>
  <meta name="description" content="Rapidly build and host Twitter Bootstrap sites">

  <meta name="viewport" content="width=device-width">
  <link rel="stylesheet" href="css/normalize.css">
 <!-- <link rel="stylesheet" href="css/jquery-ui-1.8.22.custom.css"> -->
  <link rel="stylesheet" href="css/bootstrap.css">
  <link rel="stylesheet" href="css/bootstrap-responsive.css">
  <link rel="stylesheet" href="css/select2.custom.css">
  <link rel="stylesheet" href="css/style.css?16">
  <link rel="stylesheet" href="css/dash.css?2">
  <link rel="stylesheet" href="css/colorpicker/colorpicker.css">
  <link rel="stylesheet" href="css/colorpicker/layout.css">
  <link rel="stylesheet" href="css/account.css?6">
  <!--QISONG add jquery ui css-->
  <link rel="stylesheet" href="css/jquery-ui.css">
  <!--QISONG add position css-->
  <link rel="stylesheet" href="css/position.css">
  <link rel="icon" href="images/jetstrap_favicon.png">
  <style>
  .custom-combobox {
    position: relative;
    display: inline-block;
  }
  .custom-combobox-toggle {
    position: absolute;
   /* top: 0; */
	height: 20px;
   /* bottom: 0; */
    margin-left: -1px;
    padding: 0;
    /* support: IE7 */
    /*height: 1.7em;*/
    /*top: 0.1em;*/
  }
  .custom-combobox-input {
    margin: 0;
    padding: 0.3em;
  }
  </style>
   </head>
<body>
  <!--******************************* HEADER *********************************-->
  <header class="header">
  <div class="left proxima clearfix">
      <div class="view builder-view">
        <span class="name">DEMO MODE</span><div class="icon"></div>
      </div>
    </div>
    <div class="center">
      <div id="wysi-tools" class="builder-view" style="display: none">
        <div class="btn-group">
          <button class="btn btn-dark btn-small" data-wysi-tool="bold"><i class="icon-bold icon-white"></i></button><button class="btn btn-dark btn-small" data-wysi-tool="italic"><i class="icon-italic icon-white"></i></button><button class="btn btn-dark btn-small" data-wysi-tool="link"><i class="icon-link icon-white"></i></button><button class="btn btn-dark btn-small" data-wysi-tool="align-left"><i class="icon-align-left icon-white"></i></button><button class="btn btn-dark btn-small" data-wysi-tool="align-center"><i class="icon-align-center icon-white"></i></button><button class="btn btn-dark btn-small" data-wysi-tool="align-right"><i class="icon-align-right icon-white"></i></button>
        </div>
      </div>
    </div>

    <div class="right clearfix">
	  <button id="editor-toggle">editor</button>
      <div class="view builder-view header-right">
        <div id="preview-slider" class="toggle-slider"><div class="offtext on">BUILD</div><div class="slider-wrapper"><div class="on inactive"></div><div class="off"></div><div class="slider" style="left: 1px;"></div></div><div class="ontext">TEST</div></div>
        <div class="divider"></div>
        <div class="btn-group" id="sizes-dropdown">
          <div class="dropdown pull-right dropdown-btn">
            <a class="dropdown-toggle" data-toggle="dropdown" href="#"><div id="sizes-dropdown-toggle" class="j-icon j-icon-full"></div></a>
            <ul class="dropdown-menu" id="sizes-menu">
              <li><a href="#" class="size selected" data-size="full"><div class="j-icon j-icon-full"></div></a></li>
              <li><a href="#" class="size" data-size="desktop"><div class="j-icon j-icon-desktop"></div></a></li>
              <li><a href="#" class="size" data-size="laptop"><div class="j-icon j-icon-laptop"></div></a></li>
              <li><a href="#" class="size" data-size="tablet"><div class="j-icon j-icon-tablet"></div></a></li>
              <li><a href="#" class="size last" data-size="phone"><div class="j-icon j-icon-phone"></div></a></li>
            </ul>
          </div>
        </div>
        <div class="divider"></div>
      </div>
      <a class="btn btn-success" href="/plans">Sign up now!</a>
    </div>
  </header>

  <!--********************************* MAIN *********************************-->
  <div id="main" role="main" style="height: 556px; top: 40px;">
    <img class="screen-loading-indicator hidden" src="images/screen-loading.gif" alt="Loading" title="Loading">
    <div class="view builder-view">
      <!-- ************************ LEFT SIDEBAR *********************** -->
      <div id="left-sidebar" class="sidebar left">
        <div class="sidebar-container">
          <div id="components">
            <div class="header">
              <span class="header-text">COMPONENTS</span>
              <div id="component-search" class="right">
                <div class="j-icon j-icon-close right"></div><div class="component-search-bar right">
                  <div class="left j-icon j-icon-search"></div><input class="left hidden search-bar-input" placeholder="Search Components" name="ui-search">
                </div>
              </div>
            </div>
            <div id="components-sidepane" class="sidepane nano has-scrollbar" style="height: 522px;">
              <div class="content" tabindex="0" style="right: -17px;">
                <ul id="controls-list" class="clearfix"><li data-section="bootstrap3" data-type="bootstrap3/gridrow" style="background-image: url(images/grid_row.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Grid Row</a></li><li data-section="bootstrap3" data-type="bootstrap3/button" style="background-image: url(images/button.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Button</a></li><li data-section="bootstrap3" data-type="bootstrap3/buttongroup" style="background-image: url(images/button_group.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Button Group</a></li><li data-section="bootstrap3" data-type="bootstrap3/buttontoolbar" style="background-image: url(images/button_toolbar.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Button Toolbar</a></li><li data-section="bootstrap3" data-type="bootstrap3/heading" style="background-image: url(images/heading.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Heading</a></li><li data-section="bootstrap3" data-type="bootstrap3/image" style="background-image: url(images/image.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Image</a></li><li data-section="bootstrap3" data-type="bootstrap3/pageheader" style="background-image: url(images/heading.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Page Header</a></li><li data-section="bootstrap3" data-type="bootstrap3/jumbotron" style="background-image: url(images/hero_unit.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Jumbotron</a></li><li data-section="bootstrap3" data-type="bootstrap3/alert" style="background-image: url(images/alert.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Alert</a></li><li data-section="bootstrap3" data-type="bootstrap3/well" style="background-image: url(images/well.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Well</a></li><li data-section="bootstrap3" data-type="bootstrap3/panel" style="background-image: url(images/panels.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Panel</a></li><li data-section="bootstrap3" data-type="bootstrap3/listgroup" style="background-image: url(images/list_group.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">List Group</a></li><li data-section="bootstrap3" data-type="bootstrap3/content" style="background-image: url(images/text_block.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Html Content</a></li><li data-section="bootstrap3" data-type="bootstrap3/hr" style="background-image: url(images/hr.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Horizontal Rule</a></li><li data-section="bootstrap3" data-type="bootstrap3/taglabel" style="background-image: url(images/label.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Tag Label</a></li><li data-section="bootstrap3" data-type="bootstrap3/badge" style="background-image: url(images/badge.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Badge</a></li><li data-section="bootstrap3" data-type="bootstrap3/progressbar" style="background-image: url(images/progressbar.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Progress Bar</a></li><li data-section="bootstrap3" data-type="bootstrap3/navbar" style="background-image: url(images/navbar.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Nav Bar</a></li><li data-section="bootstrap3" data-type="bootstrap3/breadcrumbs" style="background-image: url(images/breadcrumbs.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Breadcrumbs</a></li><li data-section="bootstrap3" data-type="bootstrap3/pagination" style="background-image: url(images/pagenation.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Pagination</a></li><li data-section="bootstrap3" data-type="bootstrap3/form" style="background-image: url(images/form.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Form</a></li><li data-section="bootstrap3" data-type="bootstrap3/submitbutton" style="background-image: url(images/button.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Submit Button</a></li><li data-section="bootstrap3" data-type="bootstrap3/textinputgroup" style="background-image: url(images/text_input.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Text Input</a></li><li data-section="bootstrap3" data-type="bootstrap3/textareainputgroup" style="background-image: url(images/text_area.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Text Area</a></li><li data-section="bootstrap3" data-type="bootstrap3/selectinputgroup" style="background-image: url(images/select_input.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Select Input</a></li><li data-section="bootstrap3" data-type="bootstrap3/fileinputgroup" style="background-image: url(images/file_input.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Input group</a></li><li data-section="bootstrap3" data-type="bootstrap3/checkbox" style="background-image: url(images/checkbox.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Checkbox</a></li><li data-section="bootstrap3" data-type="bootstrap3/radiobutton" style="background-image: url(images/radio.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Radio Button</a></li><li data-section="bootstrap3" data-type="bootstrap3/table" style="background-image: url(images/table.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Table</a></li><li data-section="bootstrap3" data-type="bootstrap3/container" style="background-image: url(images/container.png); background-repeat: no-repeat no-repeat;" class="ui-draggable"><a href="#">Container</a></li></ul>
              </div>
            <div class="pane"><div class="slider" style="height: 230px; top: 0px;"></div></div></div>
          </div>
        </div>
        <div class="sidebar-collapser" data-side="left">
          <div class="sidebar-collapser-caret"></div>
        </div>
      </div>

      <div id="center-viewport" class="expanded-left expanded-right" style="width: 846px; height: 556px;">
        <div id="content-wrapper" class="relative" style="height: 521px;">
          <div id="frame-wrapper">
            <div id="context-layer">
              <div class="jetstrap-highlighted-box" style="left: 54.5px; top: 473.40625px; width: 720px; height: 26px; display: block;"></div>
              <div class="jetstrap-tag" style="top: 452.40625px; left: 54.5px; display: block;">Heading</div>
            </div>
            <div id="core-frame"></div>
				    <iframe id="document-frame" class="full" src="about:blank"></iframe>
            <!--<iframe id="document-frame" src="/alpha/frame" class="relative full"></iframe>-->
            <iframe id="preview-frame" src="about:blank" class="hidden relative full" style="display: none;"></iframe>
        </div>
          <div id="frame-drop" class="hidden full ui-droppable hand"></div>
        </div>
        <div id="code-inspector">
          <div class="clearfix header">
            <div id="breadcrumbs"></div>
            <div id="editor-toggles" class="btn-group right hidden" data-toggle="buttons-radio">
              <a class="btn gray-radio-button editor-button active" href="#" data-editor="html">HTML</a><a class="btn gray-radio-button editor-button" href="#" data-editor="css">CSS</a><a class="btn gray-radio-button editor-button" href="#" data-editor="js">JS</a>
            </div>
          </div>
          <div id="editors" class="hidden">
            <div class="editor active ace_editor ace-monokai ace_dark" id="html-editor-target"><textarea class="ace_text-input" wrap="off" spellcheck="false" style="bottom: 2000em;"></textarea><div class="ace_gutter"><div class="ace_gutter-active-line"></div><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px;"></div></div><div class="ace_scroller" style="overflow-x: scroll;"><div class="ace_content" style="margin-top: 0px; width: 88px; height: 2px;"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 84px; visibility: hidden;"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_text-layer" style="padding: 0px 4px;"></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor"></div></div></div></div><div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; overflow: visible; white-space: nowrap;">X</div><div class="ace_scrollbar" style="width: 22px;"><div class="ace_scrollbar-inner" style="height: 1px;"></div></div></div>
            <div class="editor ace_editor ace-monokai ace_dark" id="css-editor-target"><textarea class="ace_text-input" wrap="off" spellcheck="false" style="bottom: 2000em;"></textarea><div class="ace_gutter"><div class="ace_gutter-active-line"></div><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px;"></div></div><div class="ace_scroller" style="overflow-x: scroll;"><div class="ace_content" style="margin-top: 0px; width: 33px; height: 2px;"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 84px; visibility: hidden;"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_text-layer" style="padding: 0px 4px;"></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor"></div></div></div></div><div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; overflow: visible; white-space: nowrap;">X</div><div class="ace_scrollbar" style="width: 22px;"><div class="ace_scrollbar-inner" style="height: 14px;"></div></div></div>
            <div class="editor ace_editor ace-monokai ace_dark" id="js-editor-target"><textarea class="ace_text-input" wrap="off" spellcheck="false" style="bottom: 2000em;"></textarea><div class="ace_gutter"><div class="ace_gutter-active-line"></div><div class="ace_layer ace_gutter-layer ace_folding-enabled" style="margin-top: 0px;"></div></div><div class="ace_scroller"><div class="ace_content" style="margin-top: 0px; width: 8px; height: 2px;"><div class="ace_layer ace_print-margin-layer"><div class="ace_print-margin" style="left: 84px; visibility: hidden;"></div></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_text-layer" style="padding: 0px 4px;"></div><div class="ace_layer ace_marker-layer"></div><div class="ace_layer ace_cursor-layer ace_hidden-cursors"><div class="ace_cursor"></div></div></div></div><div style="height: auto; width: auto; top: -100px; left: -100px; visibility: hidden; position: fixed; overflow: visible; white-space: nowrap;">X</div><div class="ace_scrollbar" style="width: 22px;"><div class="ace_scrollbar-inner" style="height: 1px;"></div></div></div>
          </div>
        </div>
      </div>

	 
      <!-- ************************ RIGHT SIDEBAR *********************** -->
	<div id="right-sidebar" class="sidebar right">
		<div class="sidebar-container">
			  <div id="properties">
				<div class="header" ></div>
				<div class="sidepane"></div>
			  </div>
			  <!--QISONG : add properties postion part -->
			   <div id="properties-position">
				<div class="header" >PROPERTIES-POSITION</div>
				<div class="sidepane nano" style="height: 1000px">
				    <div class="content"> </div>
				</div> 
			  </div>
			</div>
			<div class="sidebar-collapser" data-side="right">
			  <div class="sidebar-collapser-caret"></div>
			</div>
		  </div>
		</div>
	</div>

  <!--div id="demo-modal-5min" class="modal hide in" aria-hidden="false" style="display: block;">
    <div class="modal-header">
      <h2>Jetstrap Demo</h2>
    </div>
    <div class="modal-body" style="padding: 15px">
      <p>
        <b>Thanks for spending the last five minutes with Jetstrap!</b>
      </p>
      <p style="margin-top: 20px">
        We hope you are enjoying the demo of Jetstrap. Consider switching to a paid plan to get:
        </p><ul>
          <li>Multiple projects and cloud-based storage</li>
          <li>Project sharing and screen linking</li>
          <li>Image uploads</li>
          <li>Full HTML/JS/CSS code editing</li>
        </ul>
      <p></p>
    </div>
    <div class="modal-footer">
      <a data-action="plans" href="/plans" class="btn btn-success" data-dismiss="modal">See pricing</a>
      <a href="#" class="btn btn-inverse" style="float: left" data-dismiss="modal">Ignore</a>
    </div>
  </div>

  <div id="footer" class="clearfix">
  </div-->

  <script id="jetstrap-control-entry" type="text/x-handlebars-template">
  <li data-section="{{section}}" data-type="{{type}}"{{# if imageUrl}} style="background-image: url({{imageUrl}})"{{/if}}><a href="#">{{name}}</a></li>
</script>
<script id="jetstrap-widget-singletext" type="text/x-handlebars-template">
<input type="text" value="{{text}}"/>
</script>
<script id="jetstrap-widget-select" type="text/x-handlebars-template">
<select>
{{#each items}}
<option{{#if value}} value="{{value}}"{{else}} value="_blank_"{{/if}}{{#if selected}} selected="selected"{{/if}}>{{text}}</option>
{{/each}}
</select>
</script>
<script id="jetstrap-widget-toggle" type="text/x-handlebars-template">
  <div class="switch {{_active}}" data-checkbox="yes" data-on="{{onText}}" data-off="{{offText}}" data-toggle="switch"></div>
</script>
<script id="jetstrap-widget-button" type="text/x-handlerbars-template">
<button class="btn btn-small btn-success">{{{text}}}</button>
</script>
<script id="jetstrap-widget-buttons" type="text/x-handlerbars-template">
{{#each buttons}}
<button class="btn btn-small btn-success" data-which="{{tag}}">{{{text}}}</button>
{{/each}}
</script>
<script id="jetstrap-widget-valuetextitems" type="text/x-handlerbars-template">
<div>
  {{#each items}}
  <div class="valuetextitem">
    <div class="clearfix">
      <div class="half-label">value</div><div class="half-label">text</div>
    </div>
    <div class="clearfix">
      <input type="text" placeholder="value" class="half" value="{{value}}" />
      <input type="text" placeholder="text" class="half" value="{{text}}" />
    </div>
  </div>
  {{/each}}
</div>
<button class="btn btn-small btn-success">Add item</button>
</script>
<script id="jetstrap-widget-fileupload" type="text/x-handlerbars-template">
  <input type="text" value="{{src}}"><br>
  <button class="btn btn-small btn-success">Upload</button> <div class="loading-indicator hidden"></div>
</script>
<script id="jetstrap-widget-gridlayout" type="text/x-handlebars-template">
  <select>
  {{#each items}}
    <option{{#if value}} value="{{value}}"{{else}} value="_blank_"{{/if}}{{#if selected}} selected="selected"{{/if}}>{{text}}</option>
  {{/each}}
  <option value="_custom_"{{#if customValue}} selected{{/if}}>Custom</option>
  </select>
  <input placeholder="Custom layout (ex: 1 1 1)" type="text" value="{{#if customValue}}{{customValue}}{{/if}}" {{#if customValue}}class="custom-layout"{{else}}class="custom-layout hidden"{{/if}}>
</script>
<script id="jetstrap-widget-slider" type="text/x-handlebars-template">
  <div class="jqueryui">
    <!--QISONG: slider widget template-->
    <div class="slider" style="width: 70%;float:left;top:8px"></div><input type="text" align="center" style="position:absolute;height:30px;text-align:center;width:40px;margin-left:5px" value="{{value}}">
	<label style="position:absolute;width:20px;margin-left:160px">px</label>
  </div>
</script>
<!--QISONG: color picker widget template -->
<script id="jetstrap-widget-colorpicker" type="text/x-handlebars-template">
	<div class="colorSelector">
		<div style="background-color:{{color}}"></div>
	</div>
</script>
<!--QISONG: font picker widget template -->
<script id="jetstrap-widget-fontpicker" type="text/x-handlebars-template">
	<div>
		<input class="fontSelector custom-combobox-input ui-widget ui-widget-content ui-state-default ui-corner-left ui-autocomplete-input" autocomplete="off" style="color:black;height:23px;width: 90%">
		<a tabindex="-1" title="Show All Items" class="ui-button ui-widget ui-state-default ui-button-icon-only ui-corner-right custom-combobox-toggle" role="button" aria-disabled="false">
			<span class="ui-button-icon-primary ui-icon ui-icon-triangle-1-s" ></span>
			<span class="ui-button-text"></span>
		</a>
	</div>
</script>
<script id="jetstrap-widget-position" type="text/x-handlebars-template">
	<div placeholder="--" name="box_model" class="bbf-boxmodel"
	id="b-container-style-4-box_model">
	<span data-default-text="Margin:" class="box-title" style="color:white;">Margin:</span> 
	1em 1em false
	<div class="outer container" style="width:250px">
		<input type="text" placeholder="--" value="{{margin_top}}"
			data-label-type="margin" name="margin-top"
			class="pos center top bbf-inherited margin-top"
			tabindex="5"> 
		<input type="text" placeholder="--" value=""
			data-label-type="border" name="border-radius-top-right"
			class="pos right top f-bp-color border-radius-top-right"
			tabindex="2"> 
		<input type="text" placeholder="{{margin_right}}"
			value="{{margin_right}}" data-label-type="margin" name="margin-right"
			class="pos right middle bbf-inherited margin-right"
			tabindex="6"> 
		<input type="text" placeholder="--" value=""
			data-label-type="border" name="border-radius-bottom-right"
			class="pos right bottom f-bp-color border-radius-bottom-right"
			tabindex="3"> 
		<input type="text" placeholder="0em"
			value="{{margin_bottom}}" data-label-type="margin" name="margin-bottom"
			class="pos center bottom bbf-inherited margin-bottom"
			tabindex="7"> 
		<input type="text" placeholder="--" value=""
			data-label-type="border" name="border-radius-bottom-left"
			class="pos left bottom f-bp-color border-radius-bottom-left"
			tabindex="4"> 
		<input type="text" placeholder="auto"
			value="{{margin_left}}" data-label-type="margin" name="margin-left"
			class="pos left middle bbf-inherited margin-left"
			tabindex="8"> 
		<input type="text" placeholder="--" value=""
			data-label-type="border" name="border-radius-top-left"
			class="pos left top f-bp-color border-radius-top-left"
			tabindex="1">
	</div>
	<div data-label-type="padding" class="inner container" style="width:170px">
		<input type="text" placeholder="--" value="{{padding_top}}" data-label-type="padding"
			name="padding-top"
			class="pos center top f-bp-color padding-top"
			tabindex="9"> 
		<input type="text" placeholder="--" value="{{padding_right}}"
			data-label-type="padding" name="padding-right"
			class="pos right middle f-bp-color padding-right"
			tabindex="10"> 
		<input type="text" placeholder="--" value="{{padding_bottom}}"
			data-label-type="padding" name="padding-bottom"
			class="pos center bottom f-bp-color padding-bottom"
			tabindex="11"> 
		<input type="text" placeholder="--" value="{{padding_left}}"
			data-label-type="padding" name="padding-left"
			class="pos left middle f-bp-color padding-left"
			tabindex="12">
	</div>
	<div class="center container" style="top: 33px; right: 77.4px; bottom: 33px; left: 77.4px; background: #222;border: 1px solid #444;width:100px;display:block"></div>
</div>
<br>
</script>
<!-- view snippets -->
<script id="view-snippet-project-entry" type="text/x-handlebars-template">
<tr class="name" data-projectid="{{unique_id}}">
  <td class="name">{{name}}</td>
  <td class="last_modified">{{date_string}}</td>
  <td class="buttons">
    <a href="#" title="Export HTML" rel="tooltip" data-content="Export HTML" class="icon icon-arrow-down" data-action="export"></a>
    <a href="#" title="Delete" rel="tooltip" data-content="Delete screen" class="icon icon-trash" data-action="delete"></a>
    <a href="#" class="btn" data-action="open">Open</a>
  </td>
</tr>
</script>





  <script src="js/jquery.js"></script>
  <script>window.jQuery || document.write('<script src="js/jquery-1.7.2.js"><\/script>')</script>

  <!-- libraries -->
  <script src="js/ace.js"></script>
  <script src="js/mode-javascript.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/mode-coffee.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/mode-css.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/mode-html.js" type="text/javascript" charset="utf-8"></script>
  <script src="js/bootstrap.js"></script>
  <script src="js/underscore-min.js"></script>
  <script src="js/backbone-min.js"></script>
  <script src="js/handlebars-1.0.0.beta.6.js"></script>
  <script src="js/Markdown.Converter.js"></script>
  <script src="js/keymaster.js?1"></script>
  <script src="js/beautify.js"></script>
  <script src="js/beautify-html.js"></script>
  <script src="js/select2.min.js"></script>
  <script src="js/html2canvas.min.js"></script>
  <script src="js/jquery.plugin.html2canvas.js"></script>
  <script src="js/rangy-core.js"></script>
  <script src="js/rangy-cssclassapplier.js"></script>
  <script src="js/rangy-selectionsaverestore.js"></script>
  <script src="js/rangy-serializer.js"></script>
  <script src="js/jquery-ui-1.8.22.custom.min.js"></script>
  <script src="js/jquery-ui.js"></script>
  <script src="js/jquery.nanoscroller.min.js"></script>
  <script src="js/core.mouse.js"></script>
	
  <script src="js/filepicker.js"></script>
  <!-- color picker needed -->
  <script src="js/colorpicker/colorpicker.js"></script>
  <script src="js/colorpicker/eye.js"></script>
  <script src="js/colorpicker/layout.js"></script>
  <script src="js/colorpicker/utils.js"></script>
  <script type="text/javascript">
    filepicker.setKey('AIzxal2GTsq7RQytwQoZXz');
  </script>

  <script>
    window.JetstrapOptions = {
      'framework': 'bootstrap3'
    };
  </script>

  <!-- core -->
  <script src="js/extras.js?4"></script>
  <script src="js/builder.js?48"></script>
  <script src="js/dashboard.js?7"></script>
  <script src="js/account.js?6"></script>

 
  <script>
    window.JetstrapDemo = {
      start: function() {
        setInterval(this.fiveMin, 1000 * 60 * 5);
      },
      fiveMin: function() {
        $('#demo-modal-5min').modal('hide');
        $('#demo-modal-5min').modal('show');
      }
    }
    JetstrapDemo.start();

    $(document).ready(function() {
      $('#demo-modal-5min [data-action="plans"]').click(function() {
        window.location = '/plans';
      });
    });

    window.Jetstrap.on('readyToGo', function() {
      var template = FrameworkTemplates.getTemplate(Frameworks.get('bootstrap3').framework, 'demo');
      window.Jetstrap.builder.trigger('newDemoScreen', template);
    });
  </script>

<!-- <script>
    var _gaq=[['_setAccount','UA-33987438-1'],['_trackPageview']];
    (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
    g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
    s.parentNode.insertBefore(g,s)}(document,'script'));
  </script> -->


<iframe name="filepicker_comm_iframe" id="filepicker_comm_iframe" src="filepicker.html" style="display: none;"></iframe>
<!--<div class="modal-backdrop  in"> -->
</div>
</body>
</html>
